<template>
  <div class="app-breadcrumb" >
     <div class=" flex align-center">
       <img class="guilin_logo" src="" alt="">
       <div class="sub-title">
          <div style="font-size: 14px">桂林市人民医院数字党建系统</div>
          <div style="font-size: 10px">GUILIN PEOPLES HOSPITAL DIGITAL PARTY BUILDING SYSTEM</div>
       </div>
     </div>
  </div>
</template>

<script setup>
const route = useRoute();
const router = useRouter();
const levelList = ref([])

function getBreadcrumb() {
  // only show routes with meta.title
  let matched = route.matched.filter(item => item.meta && item.meta.title);
  const first = matched[0]
  // 判断是否为首页
  // if (!isDashboard(first)) {
  //   matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
  // }

  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}
function isDashboard(route) {
  const name = route && route.name
  if (!name) {
    return false
  }
  return name.trim() === 'Index'
}
function handleLink(item) {
  const { redirect, path } = item
  if (redirect) {
    router.push(redirect)
    return
  }
  router.push(path)
}

watchEffect(() => {
  // if you go to the redirect page, do not update the breadcrumbs
  if (route.path.startsWith('/redirect/')) {
    return
  }
  getBreadcrumb()
})
getBreadcrumb();
</script>

<style lang='scss' scoped>
.app-breadcrumb {
  color: #FFFFFF;
}
.guilin_logo{
   display: block;
   width: 30px;
   height: 30px;
 ;
}
.sub-title{
    font-size: 14px;

     margin-left: 20px;
}
</style>
